<template>
  <a-card title="车辆通行统计">
    <a-range-picker
      :showTime="true"
      format="YYYY-MM-DD HH:mm:ss"
      @change="change"
      :default-value="[moment(currentDate, dateFormat), moment(currentDate1, dateFormat)]"
    />
    <div class="container">
      <div v-if="showCharts" id="main" :style="myChartStyle2" ></div>
      <div class="echart" id="mychart" :style="myChartStyle"></div>
    </div>
    <div class="div-center-text">
      其中包含: <a-divider type="vertical" />
      <span  v-for="item in data" :key="item">
          {{ item.name }}:{{ item.value }}
          <a-divider type="vertical" />
        </span>
    </div>
    <a-timeline mode="alternate" style="margin-top:30px">
      <a-timeline-item>
        <a-icon slot="dot" type="clock-circle-o" style="font-size: 16px" />查询开始时间 :
        {{ this.start }}</a-timeline-item
      >
      <!-- <a-timeline-item>
           其中包含: <a-divider type="vertical" />
         <span v-for="item in data" :key="item">
           {{ item.name }}:{{ item.value }}
           <a-divider type="vertical" />
         </span>
       </a-timeline-item>
 -->
      <a-timeline-item>
        <a-icon slot="dot" type="clock-circle-o" style="font-size: 16px" />查询结束时间 :
        {{ this.end }}</a-timeline-item
      >
    </a-timeline>

  </a-card>

</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import moment from 'moment'
import * as echarts from "echarts";
export default {
  name: 'CarinfoCount',
  mixins: [],
  components: {},
  data() {
    this.dateFormat = 'YYYY-MM-DD HH:mm:ss'
    this.currentDate = moment().subtract(3,'month').format('YYYY-MM-DD HH:mm:ss')
    this.currentDate1 = moment().format('YYYY-MM-DD HH:mm:ss')
    return {
      showCharts: false,
      data: [],
      total: [],
      start: '',
      end: '',
      xData: [], //横坐标
      yData: [], //数据
      myChartStyle: { float: "left", width: "50%", height: "400px" },
      myChartStyle2: { float: "right", width: "50%", height: "400px" }
    }
  },
  mounted() {
    this.getRecordCout(this.currentDate, this.currentDate1)
  },
  computed: {},
  methods: {
    moment,
    change(date, dateStr) {
      this.getRecordCout(dateStr[0], dateStr[1])
    },
    getRecordCout(start, end) {
      this.showCharts = false
      this.start = start
      this.end = end
      /* this.start = start + ' 00:00:00'
       this.end = end + ' 23:59:59'*/
      getAction('/carinfo/carRecord/getCountList/'+2, { start: this.start, end: this.end }).then((res) => {
        if (res.success) {
          this.showCharts = true
          this.$nextTick(() => {
            this.data = res.result.data
            this.total = res.result.count
            this.xData=[];
            this.yData=[];
            for(var i=0;i<this.data.length;i++){
              this.xData.push(this.data[i].name)
              this.yData.push(this.data[i].value)
            }
            //this.xData = res.result.data.name
            //this.yData = res.result.data.value
            console.log(this.xData)
            this.getCharts()
            this.initEcharts()
          })
        }
      })
    },

    // 使用柱形图，关于其他配置可以去官网查看
    getCharts() {
      const chartBox = this.$echarts.init(document.getElementById('main'))
      const option = {
        title: { subtext: '总数:' + this.total },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: '来车量',
            type: 'pie',
            center: ['50%', '50%'],

            itemStyle: {
              borderRadius: 8,
            },
            data: this.data,
            label: {
              show: true,

              formatter: '{b}:{c}' + '\r' + '({d}%)',
            },
          },
        ],
      }
      chartBox.setOption(option)
      // 根据页面大小自动响应图表大小
      window.addEventListener('resize', function () {
        chartBox.resize()
      })
    },
    initEcharts() {

      // 基本柱状图
      const option = {
        xAxis: {
          data: this.xData,
          axisLabel: {
            interval: 0,
            rotate: 30
          }
        },
        yAxis: {},
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            //dataView: { show: true, readOnly: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            type: "bar", //形状为柱状图
            data: this.yData
          }
        ]
      };
      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';

.div-center-text {
  text-align: center;
}


.container {
  display: flex;
}


</style>

